forum

home / developersection / forums / responsive grid for all types of devices

Ask Question

Responsive Grid for all types of devices

Ethan Karla 324 28-Jul-2021

How to make a responsive grid for all types of devices?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

29-Jul-2021

Responsive containers are used to be 100% width until the breakpoint of that particular column has reached. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will range up with md, lg, xl, and xxl.

<div class='container-sm'>100% wide until small breakpoint</div>
<div class='container-md'>100% wide until medium breakpoint</div>
<div class='container-lg'>100% wide until large breakpoint</div>
<div class='container-xl'>100% wide until extra large breakpoint</div>
<div class='container-xxl'>100% wide until extra extra large breakpoint</div>

Below is an example for the responsive grid : 

<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container pt-4'>
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class='row'>
            <div class='col-12 col-md-8  bg-info text-dark'>.col-12 .col-md-8</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class='row'>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class='row'>
            <div class='col-6 bg-secondary text-light'>.col-6</div>
            <div class='col-6 bg-warning'>.col-6</div>
        </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
    -->
</body>
</html>

Hope this will help you.

Happy Coding!


advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy